<template>
	<view class="pagesbg">
			<view class="header_bar header_fixed header_main">
				<view class="header">
					<view class="header-goBack" @click="$tools.back(1)"></view>
					<view class="header-title">我的团队</view>
				</view> 
			</view> 
			
		<view class="team">
			<view class="team-info">
				<view class="team-info__item">
					<view class="num">{{ userInfo.umbrellaNum ? userInfo.umbrellaNum : 0 }}</view>
					<view class="txt">团队总人数</view>
				</view>
				<view class="team-info__item">
					<view class="num">{{ userInfo.subNum ? userInfo.subNum : 0 }}</view>
					<view class="txt">直推人数</view>
				</view>
				<view class="team-info__item">
					<view class="num">{{  userInfo.umbrellaPerformance ? userInfo.umbrellaPerformance : 0 }}</view>
					<view class="txt">团队业绩</view>
				</view>
				<view class="team-info__item">
					<view class="num">{{  userInfo.smallPerformance ? userInfo.smallPerformance : 0 }}</view>
					<view class="txt">小区业绩</view>
				</view>
			</view>
		</view>
		<view class="teamList-title">
			<view class="left">
				<view class="line"></view>
				<image class="img" src="../../static/user/team-title.png" mode="widthFix"></image>
			</view>
			<!-- <image class="ico" @tap.stop="handelSort" src="../../static/user/icon-sort.png" mode="widthFix"></image> -->
		</view>
		<view class="teamList">
			<view class="teamList-wrapper">
				<scroll-view class="teamList-height" scroll-y="true" @scrolltolower="lower()">
					<view class="teamList-list">
						<view class="teamList-list__item" v-for="(item,index) in teamList" :key="index">
							<view class="top">
								<image :src="imgShow(item.avatar)" mode=""></image>
							</view>
							<view class="right">
								<view class="name">{{ item.regAddress }}
								</view>
								<view class="name mt-10">
									<view class="level1">
										<text class="sp">{{ getGameLevel(item.gameLevel) }}</text>
									</view>
									<view class="level1" v-if="item.level2>0">
										<text class="sp">{{ getLevel2(item.level2) }}</text>
									</view>
									<view class="level1" v-if="item.bonusLine>0">
										<text class="sp">{{item.bonusLine}}份分红</text>
									</view>
								</view>
								<view class="txt">团队业绩：<text class="red">{{ item.umbrellaPerformance || 0}}</text></view>
								<view class="txt">小区业绩：<text class="red">{{ item.smallPerformance || 0}}</text></view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import QR from '../../components/qrcode/qrcode';
	import url from '@/common/js/url.js';
	export default {
		components:{
		},
		data(){
			return{
				avatar: '../../static/pack/logo.png',
				shareImg: '',
				shareUrl: 'https://modao.cc/app/h4dN1J8Irvdeuf971QghF',
				userInfo: {},
				teamList: [],
				level:'',
			}
		},
		computed: {
			getGameLevel(){
				return function(type){
					switch (type){
						case 0:
							return '普通用户';
							break;
						case 1:
							return '一星';
							break;
						case 2:
							return '二星';
							break;
						case 3:
							return '三星';
							break;
						case 4:
							return '四星';
							break;
					}
				}
			},
			getLevel2(){
				return function(type){
					switch (type){
						case 0:
							return '普通用户';
							break;
						case 1:
							return '策略委';
							break;
						case 2:
							return '中策委';
							break;
						case 3:
							return '发展委';
							break;
					}
				}
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.init();
		},
		methods: {
			init(){
				// this.getUserInfo();
				this.teamList= [];
				this.getTeamList();
			},
			// 查询用户实时最新信息
			getUserInfo() {
				var data = null;
				this.$Ajax('/api/user/getUserInfo',
					data,
					res => {
						if (res.code == 200) {
							this.userInfo = res.data;
							this.shareUrl = url.shareWebUrl +'/?invite='+ this.userInfo.userCode;
							this.shareImg = this.creatQrcode(this.shareUrl);
						}
					}, err => {
					}
				)
			},
			// 筛选
			handelSort(){
				const that=this
				uni.showActionSheet({
					itemList: ['特困区', '贫困区', '小康区','富人区'],
					success: function (res) {
						console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
						that.level = res.tapIndex 
						that.init();
					},
					fail: function (res) {
						console.log(res.errMsg);
					}
				});
			},
			// 我的直推用户列表
			getTeamList(){
				var data = {
					level:this.level
				};
				this.$Ajax('/api/user/getTeamList',data,res => {
						if(res.code == 200){
							this.userInfo = res.data.userInfo;
							this.teamList = res.data.xiaList;
						}
					}, err => {
					}, 'GET'
				)
			},
			lower(){
				console.log("ddd");
			},
			creatQrcode(url) {
				if (url == '') {
					return false;
				}
				let img = QR.createQrCodeImg(url);
				return img;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header_fixed + view{
	}
	.mt-10{
		margin-top: 10rpx;
	}
	.team{
			&-info{
				background: url(../../static/user/team-infoBg.png) no-repeat;
				background-size: 100% 100%;
				width: 91.5%;
				margin: auto;
				margin-top: 42rpx;
				border-radius: 12rpx;
				color: #fff;
				@include flexLeft;
				&__item{
					height: 240rpx;
					@include flexCenterColumn;
					width: 50%;
					.num{
						font-weight: bold;
						font-size: 36rpx;
						line-height: 42rpx;
					}
					.txt{
						margin-top: 10rpx;
						font-size: 24rpx;
						color: rgba(255,255,255,0.8);
						line-height: 28rpx;
					}
				}	
			}
			// margin: -206rpx 40rpx 0;
			&-wrapper{
				height: 338rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				padding: 40rpx 0;
				width: 91.5%;
				margin: auto;
			}
			&-box{
				@include flexLeftColumn;
				&__userBox{
					@include flexBetween;
					width: 100%;
					.left{
						@include flexLeft;
						.imgB{
							width: 104rpx;
							height: 104rpx;
							margin-right: 32rpx;
							border-radius: 50%;
							background: #F5F5F5;
							image{
								width: 100%;
								height: 100%;
								border-radius: 50%;
							}
						}
						.name{
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 32rpx;
							color: #131414;
						}
					}
					.right{
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #FFFFFF;
						background: linear-gradient( 135deg, #0067F2 0%, #3DBBFF 99%);
						border-radius: 32rpx;
						padding: 16rpx 40rpx;
					}
				}
				&__itemBox{
					@include flexBetween;
					width: 100%;
					margin-top: 70rpx;
					.itemBox{
						@include flexLeftColumn;
						&:nth-last-child(1){
							@include flexRightColumn;
						}
						.title{
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #979797;
						}
						.num{
							font-family: DIN, DIN;
							font-weight: 700;
							font-size: 36rpx;
							color: #131414;
							margin-top: 10rpx;
						}
					}
				}
			}
		}
	.teamList-title{
		width: 91.5%;
		margin: auto;
		margin-top: 20rpx;
		border-radius: 12rpx;
		background: #fff;
		padding: 40rpx 34rpx;
		@include flexBetween;
		.left{
			@include flexLeft;
		}
		.line{
			width: 6rpx;
			height: 36rpx;
			background: #EE3A33;
			border-radius: 86rpx;
			margin-right: 40rpx;
		}
		.img{
			width: 148rpx;
			height: 52rpx;
		}
		.ico{
			width: 36rpx;
			height: 33rpx;
		}
	}	
	.teamList{
		&-height{
			/* #ifdef H5 */
			height: calc(100vh - 90rpx - 330rpx - (338rpx - 206rpx) + 8rpx);
			/* #endif */
			/* #ifdef APP-PLUS */
			height: calc(100vh - 100rpx - 400rpx - (338rpx - 206rpx) + 8rpx);
			/* #endif */
		}
		&-list{
			@include flexLeftColumn;
			width: 91.5%;
			margin: auto;
			&__item{
				@include flexLeft;
				background: #FFFFFF;
				border-radius: 20rpx;
				margin-top: 20rpx;
				width: 100%;
				padding: 34rpx 28rpx;
				.top{
					@include flexLeft;
					image{
						width: 108rpx;
						height: 108rpx;
						margin-right: 20rpx;
						border-radius: 100%;
					}
				}
				.right{
					width: 100%;
					margin-top: 22rpx;
					.name{
						font-weight: bold;
						font-size: 28rpx;
						color: #333333;
						line-height: 33rpx;
						@include flexLeft;
					}
					.level{
						// @include flexCenter;
						// background: #F4010A;
						// background: url(../../static/user/user-titleBg.png) no-repeat;
						// background-size: 100% 100%;
						// width: 194rpx;
						// height: 52rpx;
						// line-height: 52rpx;
						// padding-left:  54rpx;
						// padding-right:  20rpx;
						color: #fff;
						font-size: 24rpx;
						margin-left: 14rpx;
						@include flexLeft;
						position: relative;
						.ico{
							width: 48rpx;
							height: 48rpx;
							position: absolute;
							left: -2px;
						}
						.sp{
							// height: 40rpx;
							padding: 4rpx 20rpx;
							padding-left: 58rpx;
							background: linear-gradient( 180deg, #FA6A45 0%, #F94123 100%);
							border-radius: 74rpx 74rpx 74rpx 74rpx;
						}
					}
					.level1{
						font-size: 24rpx;
						color: #fff;
						padding: 8rpx 10rpx;
						background: linear-gradient( 180deg, #FA6A45 0%, #F94123 100%);
						border-radius: 74rpx;
						margin-left: 10rpx;
					}
					.txt{
						font-size: 26rpx;
						color: rgba(0, 0, 0, 0.40);
						margin-top: 26rpx;
					}
					.red{
						color: #FA6A45;
					}
				}
			}
		}
	}
	
</style>